<template>
	<view class="personTicket">
		<view class="searchBox">
			<uni-search-bar :radius="100" cancelButton="false" @confirm="search"></uni-search-bar>
		</view>
		<view class="ticketClass">
			<view class="fl">
				<uni-combox :candidates="ticketsStatus.candidates" :placeholder="ticketsStatus.label" v-model="ticketsStatus.candidates.value">
				</uni-combox>
			</view>
			<view class="fl">
				<uni-combox :candidates="ticketsClass.candidates" :placeholder="ticketsClass.label" v-model="ticketsClass.candidates.value">
				</uni-combox>
			</view>
		</view>
		<view class="ticketList">
			<radio-group @change="checkboxChange">
				<view class="uni-list-cell" v-for="(item,index) in ticketItem" :key="item.title">
					<view class="checkbox">
						<radio :value="item.title" :checked="item.checked" class="left-checkbox" style="width: 80rpx;height: 80rpx;" />
					</view>
					<view class="ticketItem" @click="detail(index)">
						<view class="title">
							<view class="fl">{{item.title}}</view>
							<view class="fr">{{item.status}}</view>
						</view>
						<view class="content">
							<view>{{item.company}}</view>
							<view>
								<text>金额：</text>
								<text>￥{{item.quota}}</text>
							</view>
							<view>
								<text>时间：</text>
								<text>{{item.times}}</text>
							</view>
							<view>
								<text>付款方：</text>
								<text>{{item.payer}}</text>
							</view>
						</view>
					</view>
				</view>
			</radio-group>
		</view>
		<view class="footer">
			<button class="btn" @click="confirm">确定</button>
		</view>
	</view>
</template>

<script>
	let app = getApp()
	export default {
		data() {
			return {
				ticketsStatus: {
					label: '发票状态',
					candidates: ['审核中', '已审核', '未审核'],
					value: ''
				},
				ticketsClass: {
					label: '发票类型',
					candidates: ['审核中', '已审核', '未审核'],
					value: ''
				},
				ticketItem: [{
						title: '电票',
						status: '未报销',
						name: '陈赫斯',
						company: '滴滴出行科技有限公司',
						quota: '269.78',
						times: '2020-03-12',
						payer: '时代邻里股份有限公司',
						imgUrl:'/static/didiBill.png'
					},
					{
						title: '航空客票',
						status: getApp().globalData.status,
						name: '陈赫斯',
						company: '深圳航空有限责任公司',
						quota: '910.00',
						times: '2020-12-22',
						payer: '时代邻里股份有限公司',
						number: '784-2442237949',
						fuelCharge: '￥50.00',
						developFund: '0.00',
						insure: '0.00',
						planeNumeber: '8207',
						seat: 'V',
						imgUrl:'/static/planeBill.png'
						
					},
					{
						title: '专票',
						status: '未报销',
						company: '汉庭星空酒店管理有限公司',
						quota: '230.00',
						times: '2020-12-22',
						payer: '时代邻里股份有限公司',
						imgUrl:'/static/zhuanBill.png'
					}
				],
				sendData: []
			}
		},
		methods: {
			checkboxChange: function(e) {
				var values = e.detail.value;
				var items = this.ticketItem
				this.sendData = []
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					if (values.includes(items[i].title)) {
						this.sendData.push(items[i])
					}
				}
			},
			confirm() {
				uni.$emit('relateApply', this.sendData)
				uni.navigateBack()
			},
			detail(index) {
				var data = this.ticketItem[index]
				setTimeout(function() {
					uni.$emit('ticketDetail', data)
				}, 50)
				uni.navigateTo({
					url: './ticketDetail'
				})
			},
			confirm() {
				let sendData = this.sendData
				setTimeout(function() {
					uni.$emit('ticketSelected', sendData)
				}, 50)
				this.$set(this.ticketItem, 1, {
					title: '航空客票',
					status: '已报销',
					name: '陈赫斯',
					company: '深圳航空有限责任公司',
					quota: '￥910.00',
					times: '2020-12-22',
					payer: '时代邻里股份有限公司',
					number: '784-2442237949',
					fuelCharge: '￥50.00',
					developFund: '0.00',
					insure: '0.00',
					planeNumeber: '8207',
					seat: 'V'
				})

				uni.navigateTo({
					url: '../travelFreeBill/add/expenseDetail'
				})


			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/pages/add/add.scss";

	page {
		padding: 20rpx;
		margin-bottom: 200rpx;
	}

	.searchBox {
		.uni-searchbar {
			background: $themeColor !important;
		}
	}

	.ticketClass {
		height: 50rpx;

		.fl {
			width: 170rpx;
			padding-left: 12px;
			;
			@include divH(80rpx);
		}
	}

	.ticketList {
		width: 100%;
		height: auto;
		margin-bottom: 20px;

		.checkbox {
			width: 15%;
			display: inline-block;
			height: 100%;
			position: relative;
		}

		.ticketItem {
			display: inline-block;
			width: 85%;
			height: 100%;
			border-radius: 15px;
			box-shadow: 4px 4px 15px #333;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 0 15px 15px 15px;

			.title {
				overflow: hidden;
				width: 100%;
				@include divH(80rpx);
				text-align: center;
				padding-top: 15px;

				.fl {
					width: auto;
					@include divH(70rpx);
					padding: 0 20px;
					background-color: #b1b1b1;
					border-radius: 5px;
				}

				.fr {
					width: auro;
					@include divH(70rpx);
					padding: 0 10px;
					background-color: $themeColor;
					color: #FFFFFF;
					border-radius: 5px;
				}
			}

			.content {
				@include divH(60rpx);
			}
		}
	}

	/deep/ .uni-radio-wrapper {
		.uni-radio-input {
			height: 60rpx;
			width: 60rpx;
			position: absolute;
			top: 0;
			&::before {
				font-size: 60rpx;
			}
		}
	}

	.uni-list-cell {
		height: 380rpx;
		margin: 16px 0 0 0;
		line-height: 380rpx;
	}

	.footer {
		width: 96%;
		position: fixed;
		bottom: 0;
	}

	.btn {
		border: 1rpx solid $themeColor;
		background-color: $themeColor;
		color: white;
		bottom: 0;
	}
	/deep/.uni-combox__input-arrow[data-v-6f115564] {
    padding: 0;
}
</style>
